<template>
  <div class="main">
    <div class="mbt">全部商品 2</div>
    <el-row class="bt">
      <el-col :span="2">
        <el-checkbox v-model="chkAll">全部</el-checkbox>
      </el-col>
      <el-col :span="10">商品</el-col>
      <el-col :span="3">单价</el-col>
      <el-col :span="3">数量</el-col>
      <el-col :span="3">小计</el-col>
      <el-col :span="3">操作</el-col>
    </el-row>
    <div class="order" v-for="dt in orderList" :key="dt.id">
      <el-row class="info">
        <el-col :span="1">
          <el-checkbox v-model="dt.chk"></el-checkbox>
        </el-col>
        <el-col :span="2" class="lr">
          <img :src="dt.url" />
        </el-col>
        <el-col :span="9" class="lr">{{dt.name}}</el-col>
        <el-col :span="3">￥{{dt.dj}}</el-col>
        <el-col :span="3">
          <el-input-number size="mini" v-model="dt.num"></el-input-number>
        </el-col>
        <el-col :span="3">￥{{dt.total}}</el-col>
        <el-col :span="3">
          <p>删除</p>
          <p>移动我的收藏</p>
        </el-col>
      </el-row>
    </div>
    <el-row class="btm">
      <el-col :span="12">
        <el-checkbox v-model="chkAll">全选</el-checkbox> 删除选中商品 移到收藏夹 清理购物车
      </el-col>
      <el-col :span="12" style="text-align:right;">
        总价：￥956.00 <el-button type="danger">去结算</el-button>
      </el-col>
    </el-row>    
  </div>
</template>
<script>
export default {
  data() {
    return {
      chkAll: true,
      orderList: [
        {
          id: 1,
          chk:true,
          url:
            "http://yf.401520.com/product/3/5/27f0e1a59e564e0b8417f3d91265a17f.jpg",
          name: "暖场礼品 森活硅藻土环保快速吸水杯垫（100起发）",
          num: 100,
          dj: "8.00",
          total: "800.00"
        },
        {
          id: 2,
          chk:true,
          url:
            "http://yf.401520.com/product/4/5/a423a9d2a44a42498aa3915f211db883.jpg",
          name: "啄木鸟 家纺枕头plover枕头泰国乳胶颗粒枕（两只）",
          num: 1,
          dj: "156.00",
          total: "156.00"
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.main {
  color: rgb(75, 75, 75);
  background: white;
  .mbt {
    color: red;
    padding: 10px 0 0 20px;
  }
}
.main .bt {
  margin: 2px 20px 20px 20px;
  text-align: center;
  line-height: 30px;
  background: rgb(238, 238, 238);
}

.main .order {
  margin: 20px;
  border: 1px solid rgb(221, 220, 220);
}
.main .order .od-bt {
  padding: 5px 20px;
  background: rgb(238, 238, 238);
}
.main .order .info {
  padding: 15px 0;
  text-align: center;
}
.lf {
  text-align: left;
}
.btm{
  margin:0 20px;
}
</style>